« Previous Next »

JavaScript Global Scope Variables

var Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="varOutput"></div>
    <Script>
          var globalVarExample = "This is a var variable";
          function displayVar() {
            globalVarExample = "Updated var variable";
            document.getElementById("varOutput").innerText = globalVarExample;
          }
          displayVar();
     </Script>
</body>
</html>
Output:

let Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="varOutput"></div>
    <Script>
        let globalLetExample = "This is a let variable";
            function displayLet() {
                globalLetExample = "Updated let variable";
                document.getElementById("letOutput").innerText = globalLetExample;
            }
        displayLet();
    </Script>
</body>
</html>
Output:

const Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="varOutput"></div>
    <Script>
        const globalConstExample = "This is a const variable";
        function displayConst() {
            document.getElementById("constOutput").innerText = globalConstExample;
        }
        displayConst();
    </Script>
</body>
</html>
Output:

JavaScript Global, Function, and Block Scope

var, let, and const in Different Scopes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="varOutput"></div>
    <Script>
        // Global scope
        let globalLetScope = "Global let";
        const globalConstScope = "Global const";
        var globalVarScope = "Global var";
        function scopeExample() {
            // Function scope
            let functionLet = "Function let";
            const functionConst = "Function const";
            var functionVar = "Function var";
            if (true) {
                // Block scope
                let blockLet = "Block let";
                const blockConst = "Block const";
                var blockVar = "Block var";
                console.log(globalLetScope); // Access globalLetScope from block
                console.log(functionLet); // Access functionLet from block
                console.log(blockLet); // Log blockLet
            }
            console.log(globalConstScope); // Access globalConstScope from function
            console.log(functionConst); // Log functionConst
            console.log(blockVar); // Access blockVar (var has function scope)
        }
        scopeExample();
        console.log(globalVarScope); // Access globalVarScope from global scope
    </Script>
</body>
</html>
Output:

« Previous Next »